<template>
  <div class="left">
    <div class="TeachingStaff component-wrapper">
      <!-- <div class="TeachingStafftitle">
        <h3>师资情况</h3>
      </div> -->
      <!-- <TSratio /> -->
      <TeachingStaff />
    </div>
    <div class="Expenditure component-wrapper">
      <!-- <div class="Expendtitle">
        <h3>生均日常教育支出</h3>
      </div> -->
      <Expenditure />
    </div>
  </div>
</template>

<script>
// import TSratio from "./TSratio.vue";
import Expenditure from "./Expenditure.vue";
import TeachingStaff from "./TeachingStaff/TeachingStaff.vue";

export default {
  name: "LeftComponent",
  components: {
    // TSratio,
    Expenditure,
    TeachingStaff,
  },
};
</script>

<style scoped>
.left {
  display: flex;
  flex-direction: column; /* 设置为垂直方向排列 */
  height: 100%; /* 设置父容器高度为100% */
  width: 100%;
}

.component-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.TeachingStafftitle,
.Expendtitle {
  flex: 10; /* 设置标题和组件上下分布比例为1:9 */
  height: 100px;
  width: 100%;
  text-align: left;
  /* background-color: aqua; */
  /* background-image: url('@/assets/title.png');
  background-size: cover; */
}

.TeachingStafftitle h3,
.Expendtitle h3 {
  padding-left: 28px;
  font-size: 18px;
  margin-bottom: 10px;
  background-color: bisque;
}

.TeachingStaff {
  flex: 6; /* 设置组件区域上下分布比例为1:9 */
  margin: 15px;
  margin-bottom: 10px;
}

.Expenditure {
  flex: 4; /* 设置组件区域上下分布比例为1:9 */
  margin: 15px;
  margin-top: 10px;
}
</style>



